<template>
  <view class="page">
    <!-- 导航栏 -->
    <tui-navigation-bar title="优惠券"></tui-navigation-bar>

    <tui-tab
      :tabs="tabs"
      :current="currentTab"
      :color="$variables.primaryGreyText"
      :selectedColor="$variables.gold"
      :sliderBgColor="$variables.gold"
      backgroundColor="transparent"
      @change="tabsChange"
    ></tui-tab>

    <swiper
      class="swiper"
      :current="currentTab"
      @change="swiperChange"
      :style="{
        height: swiperHeight
      }"
    >
      <!-- 全部 -->
      <swiper-item class="swiper-item">
        <my-container :data="couponList" refresh @refresh="getMemberCouponList">
          <section class="coupon-list" v-for="card in couponList" :key="card.id">
            <view class="header">
              <view class="left">{{ card.bname }}</view>
              <view v-if="card.expired === expiredDict['已过期']" class="right">已过期</view>
              <view v-else class="right">{{ card.isUsed | useType }}</view>
            </view>
            <view class="is-flex items-center content">
              <image src="/static/images/coupon/coupon.png" mode="widthFix" style="width: 70px"></image>
              <view class="is-flex-col pl-5">
                <view class="title">{{ card.title }}</view>
                <view class="time">有效期 : {{ card.limittime ? `请在 ${card.limittime} 前使用` : '' }}</view>
              </view>
            </view>

            <view class="is-flex justify-end items-end foot">
              <view v-if="card.expired === expiredDict['未过期'] && card.isUsed === isUsedDict['未使用']" class="gold-btn mr-10" @click="openCouponDetailModal(card, 'qrcode')"
                >到店核销</view
              >
              <view v-if="card.expired === expiredDict['未过期']" class="gold-btn" @click="openCouponDetailModal(card)">详情</view>
            </view>

            <!-- 已过期图标 -->
            <my-icon v-if="card.expired === expiredDict['已过期']" name="expire" class="is-used" color="#878a98" size="55"></my-icon>
          </section>
        </my-container>
      </swiper-item>

      <!-- 未使用 -->
      <swiper-item class="swiper-item">
        <my-container :data="noUsedCouponList" refresh @refresh="getMemberCouponList">
          <section class="coupon-list" v-for="card in noUsedCouponList" :key="card.id">
            <view class="header">
              <view class="left">{{ card.bname }}</view>
              <view v-if="card.expired === expiredDict['已过期']" class="right">已过期</view>
              <view v-else class="right">{{ card.isUsed | useType }}</view>
            </view>
            <view class="is-flex items-center content">
              <image src="/static/images/coupon/coupon.png" mode="widthFix" style="width: 70px"></image>
              <view class="is-flex-col pl-5">
                <view class="title">{{ card.title }}</view>
                <view class="time">有效期 : {{ card.limittime ? `请在 ${card.limittime} 前使用` : '' }}</view>
              </view>
            </view>

            <view class="is-flex justify-end items-end foot">
              <view v-if="card.expired === expiredDict['未过期'] && card.isUsed === isUsedDict['未使用']" class="gold-btn mr-10" @click="openCouponDetailModal(card, 'qrcode')"
                >到店核销</view
              >
              <view v-if="card.expired === expiredDict['未过期']" class="gold-btn" @click="openCouponDetailModal(card)">详情</view>
            </view>

            <!-- 已过期图标 -->
            <my-icon v-if="card.expired === expiredDict['已过期']" name="expire" class="is-used" color="#878a98" size="55"></my-icon>
          </section>
        </my-container>
      </swiper-item>

      <!-- 已使用 -->
      <swiper-item class="swiper-item">
        <my-container :data="isUsedCouponList" refresh @refresh="getMemberCouponList">
          <section class="coupon-list" v-for="card in isUsedCouponList" :key="card.id">
            <view class="header">
              <view class="left">{{ card.bname }}</view>
              <view v-if="card.expired === expiredDict['已过期']" class="right">已过期</view>
              <view v-else class="right">{{ card.isUsed | useType }}</view>
            </view>
            <view class="is-flex items-center content">
              <image src="/static/images/coupon/coupon.png" mode="widthFix" style="width: 70px"></image>
              <view class="is-flex-col pl-5">
                <view class="title">{{ card.title }}</view>
                <view class="time">有效期 : {{ card.limittime ? `请在 ${card.limittime} 前使用` : '' }}</view>
              </view>
            </view>

            <view class="is-flex justify-end items-end foot">
              <view v-if="card.expired === expiredDict['未过期'] && card.isUsed === isUsedDict['未使用']" class="gold-btn mr-10" @click="openCouponDetailModal(card, 'qrcode')"
                >到店核销</view
              >
              <view v-if="card.expired === expiredDict['未过期']" class="gold-btn" @click="openCouponDetailModal(card)">详情</view>
            </view>

            <!-- 已过期图标 -->
            <my-icon v-if="card.expired === expiredDict['已过期']" name="expire" class="is-used" color="#878a98" size="55"></my-icon>
          </section>
        </my-container>
      </swiper-item>

      <!-- 已过期 -->
      <swiper-item class="swiper-item">
        <my-container :data="expiredCouponList" refresh @refresh="getMemberCouponList">
          <section class="coupon-list" v-for="card in expiredCouponList" :key="card.id">
            <view class="header">
              <view class="left">{{ card.bname }}</view>
              <view v-if="card.expired === expiredDict['已过期']" class="right">已过期</view>
              <view v-else class="right">{{ card.isUsed | useType }}</view>
            </view>
            <view class="is-flex items-center content">
              <image src="/static/images/coupon/coupon.png" mode="widthFix" style="width: 70px"></image>
              <view class="is-flex-col pl-5">
                <view class="title">{{ card.title }}</view>
                <view class="time">有效期 : {{ card.limittime ? `请在 ${card.limittime} 前使用` : '' }}</view>
              </view>
            </view>

            <view class="is-flex justify-end items-end foot">
              <view v-if="card.expired === expiredDict['未过期'] && card.isUsed === isUsedDict['未使用']" class="gold-btn mr-10" @click="openCouponDetailModal(card, 'qrcode')"
                >到店核销</view
              >
              <view v-if="card.expired === expiredDict['未过期']" class="gold-btn" @click="openCouponDetailModal(card)">详情</view>
            </view>

            <!-- 已过期图标 -->
            <my-icon v-if="card.expired === expiredDict['已过期']" name="expire" class="is-used" color="#878a98" size="55"></my-icon>
          </section>
        </my-container>
      </swiper-item>
    </swiper>

    <my-loading ref="loading"></my-loading>

    <!-- 优惠券详情组件 -->
    <modal-coupon-detail ref="couponDetailModal"></modal-coupon-detail>
  </view>
</template>

<script>
export default {
  data() {
    return {
      /* css 一些变量值 */
      tabsHeight: '80rpx',
      /* css 一些变量值 */

      $variables: this.$variables,
      tabs: ['全部', '未使用', '已使用', '已过期'],
      isUsedDict: { 未使用: 0, 已使用: 1 },
      expiredDict: { 未过期: 0, 已过期: 1 },
      currentTab: 0,
      couponList: null
    }
  },
  filters: {
    useType(val) {
      return val === 0 ? '未使用' : '已使用'
    }
  },
  computed: {
    swiperHeight() {
      return `calc(100vh - ${this.navBarHeight} - ${this.tabsHeight});`
    },

    // 未使用优惠券列表
    noUsedCouponList() {
      const couponList = this.couponList
      if (!couponList) return null

      return couponList.filter(item => {
        return item.expired === this.expiredDict['未过期'] && item.isUsed === this.isUsedDict['未使用']
      })
    },
    // 已使用优惠券列表
    isUsedCouponList() {
      const couponList = this.couponList
      if (!couponList) return null
      return couponList.filter(item => {
        return item.isUsed === this.isUsedDict['已使用']
      })
    },
    // 过期优惠券列表 ( expired - 是否过期（ 0: 否, 1: 是）)
    expiredCouponList() {
      const couponList = this.couponList
      if (!couponList) return null
      return couponList.filter(item => {
        return item.expired === this.expiredDict['已过期']
      })
    }
  },
  async onShow() {
    this.initLoginInfo().then(res => {
      this.getMemberCouponList()
    })
  },
  methods: {
    openCouponDetailModal(card, type = 'all') {
      this.$refs.couponDetailModal.open({ selectCoupon: card, type: type })
    },
    closeCouponDetailModal() {
      this.$refs.couponDetailModal.close()
    },
    // 获取会员优惠券列表
    getMemberCouponList() {
      const baseParam = this.getBase(['token', 'usertoken', 'selectuniacid'])
      if (!baseParam) return

      this.$refs.loading.open()
      console.param('获取会员优惠券列表', baseParam)
      this.$api
        .getMemberCouponList(baseParam)
        .then(res => {
          console.res('获取会员优惠券列表', res)
          this.couponList = this.$format(res, 'data')
        })
        .catch(err => {
          console.err('获取会员优惠券列表', err)
          this.errMsg(err, '获取会员优惠券列表失败')
        })
        .finally(() => {
          return this.$refs.loading.close()
        })
    },
    tabsChange(param) {
      this.currentTab = param.index
    },
    swiperChange(param) {
      this.currentTab = param.detail.current
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$tabsHeight: 80rpx;
$normalNavBarHeight: 64px;
.swiper {
  height: calc(100vh - #{$tabsHeight} - #{$normalNavBarHeight});
  .swiper-item {
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    overflow: auto;
    .coupon-list {
      position: relative;
      background: #333952;
      border-radius: 10px;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
      margin-bottom: 15px;

      .header {
        @include is-flex(row, space-between, center, nowrap);
        @include border-bottom;
        padding: 10px 15px;
        font-size: $font-size-xs;
        .left {
          color: $color-primary-grey-text;
        }
        .right {
          color: $gold;
        }
      }
      .content {
        padding: 10px;
        font-size: $font-size-xs;
        .title {
          font-size: $font-size-base;
          font-weight: bold;
        }
        .time {
          color: $color-primary-grey-text;
          padding: 2px 0;
        }
        .price {
          color: $gold;
        }
      }
      .foot {
        padding: 0 15px 12px 15px;
        color: $gold;
        font-size: $font-size-xs;
        min-height: 32px;
        .gold-btn {
          font-size: $font-size-xs;
          padding: 3px 10px;
          border-radius: 10px;
        }
      }
      .is-used {
        position: absolute;
        right: 15px;
        bottom: 15px;
      }
    }
  }
}
</style>
